<template>
    <div class="prediction-container">
      <h1>购买金额预测</h1>
      <div class="form-group">
        <label>日期:</label>
        <input type="date" v-model="month" />
      </div>
      <button @click="getPrediction">获取预测结果</button>
      <div class="result" v-if="predictedPurchase !== null">
        预测购买金额：{{ predictedPurchase.toFixed(2) }}
      </div>
      <div class="error" v-if="errorMsg">
        错误：{{ errorMsg }}
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        month: '2025-08-01', // 默认日期
        predictedPurchase: null,
        errorMsg: ''
      }
    },
    methods: {
      async getPrediction() {
          console.log('当前选择的日期：', this.month); 
        try {
          // 发 POST 请求到后端，仅传递日期参数
          const response = await fetch('http://localhost:5000/predict', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
  
            body: `Month=${this.month}` 
          });
  
          const result = await response.json();
          if (result.success) {
            this.predictedPurchase = result.predictedPurchase;
            this.errorMsg = '';
          } else {
            this.errorMsg = result.error;
            this.predictedPurchase = null;
          }
        } catch (error) {
          this.errorMsg = `请求失败：${error.message}`;
          this.predictedPurchase = null;
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .prediction-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    font-family: Arial, sans-serif;
  }
  .form-group {
    margin: 15px 0;
  }
  label {
    display: inline-block;
    width: 80px;
  }
  input {
    padding: 6px;
    width: 200px;
  }
  button {
    padding: 8px 20px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .result {
    margin-top: 20px;
    color: green;
  }
  .error {
    margin-top: 20px;
    color: red;
  }
  </style>